<template>
  <div class="layout page-group">
    <Row>
      <Col span="24"><Button type="primary" icon="md-add" @click="onEdit('')">{{$t('page.base.groupadd')}}</Button></Col>
    </Row>
    <Divider />
    <Table :columns="columns" :data="group.list" border :loading="group.loading">
      <template slot-scope="{ row, index }" slot="namespace">
        {{row.namespace?row.namespace:$t('page.base.nsall')}}
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" v-if="row.group!=='DEFAULT_GROUP'" @click="onEdit(row.group)">{{$t('button.edit')}}</Button>
      </template>
    </Table>
    <GroupEdit ref="editor" @onRefresh="loadGroup" />
  </div>
</template>

<script>
  import GroupEdit from './comp/groupedit'
  export default {
    components: { GroupEdit },
    data() {
      return {
        columns: [
          { renderHeader: (h, col) => { return h('span', this.$t('page.base.group')) }, key: 'group', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.base.ns')) }, slot: 'namespace', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('form.remark')) }, key: 'remark' },
          { title: '', slot: 'action', width: 150, align: 'center' }
        ],
        group: {
          list: [],
          loading: true,
        },
      }
    },
    mounted() {
      this.loadGroup()
    },
    methods: {
      loadGroup() {
        this.group.loading = true
        this.$md.dispatch('group_list').then(data => {
          if (data.retCode === 1) {
            this.group.list = data.data
          }
          this.group.loading = false
        })
      },
      onEdit(name) {
        let group
        if (name) group = this.$collect.findByProp(this.group.list, 'group', name)
        this.$refs.editor.show(group)
      },
    }
  };
</script>

<style scoped>
</style>
